<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }

        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        .screen {
            width: 500px;
            height: 200px;
            /*overflow: hidden;*/
            position: relative;
        }

        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }

        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 1000px;
        }

        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }

        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }

        .all ol li.current {
            background: yellow;
        }



        #arr {
            display: none;
        }

        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }

        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>
</head>

<body>
    <div class="all" id='box'>
        <div class="screen">
            <ul>
                <li><img src="images/laugh01.gif" width="500" height="200" /></li>
            </ul>
            <ol>
            </ol>

        </div>
        <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
    </div>

    <script>
        // 1. 定义一组数据，存放所有图片的路径
        const images = ['images/laugh01.gif', 'images/laugh02.gif', 'images/laugh03.gif', 'images/laugh04.gif', 'images/laugh05.gif', 'images/laugh43.gif'];

        // 2. 获取到要用的元素
        let box = document.getElementById('box');
        let screen = box.querySelector('.screen');
        let ul = screen.firstElementChild;
        let ol = screen.lastElementChild;
        let arr = document.getElementById('arr');
        let left = document.getElementById('left');
        let right = document.getElementById('right');

        // 3. 动态生成页码
        for (let i = 0; i < images.length; i++) {
            // 创建li放到ol中
            let olLi = document.createElement('li');

            // 放页码
            olLi.innerText = i + 1;

            // 如果是第一个页码：添加一个类名：current
            if (i == 0) {
                olLi.classList.add('current');
            }

            // 加到ol上
            ol.appendChild(olLi);
        }

        // 4. 给box添加鼠标的移入效果：显示箭头
        box.onmouseover = function () {
            arr.style.display = 'block';
        };

        // 5. 给box添加鼠标的移出效果：隐藏箭头
        box.onmouseout = function () {
            arr.style.display = '';
        };
    </script>
</body>

</html>